<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="名称" :label-width="formLabelWidth" prop="name">
				<el-input v-model="form.name" autocomplete="off" placeholder="请输入名称"></el-input>
			</el-form-item>
			<el-form-item label="标识" :label-width="formLabelWidth" prop="code">
				<el-input v-model="form.code" autocomplete="off" placeholder="请输入标识"></el-input>
			</el-form-item>
			<el-form-item :label-width="formLabelWidth" prop="title">
				<template #label>
					SEO标题
					<el-tooltip content="123" placement="top"><i class="el-icon-info"></i></el-tooltip>
				</template>
				<el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"></el-input>
			</el-form-item>
			<el-form-item :label-width="formLabelWidth" prop="info">
				<template #label>
					SEO描述
					<el-tooltip content="123" placement="top"><i class="el-icon-info"></i></el-tooltip>
				</template>
				<el-input v-model="form.info" autocomplete="off" placeholder="请输入描述"></el-input>
			</el-form-item>
			<el-form-item :label-width="formLabelWidth" prop="keywords">
				<template #label>
					SEO关键字
					<el-tooltip content="123" placement="top"><i class="el-icon-info"></i></el-tooltip>
				</template>
				<el-input v-model="form.keywords" autocomplete="off" placeholder="请输入关键字"></el-input>
			</el-form-item>
			<el-form-item label="上级栏目" :label-width="formLabelWidth">
				<el-select v-model="form.parentId" clearable placeholder="请选择">
					<el-option :label="selParent.label" :value="selParent.id">
						<el-tree
							:data="allParents"
							:props="{
								label: 'name', // 显示名称
								children: 'children', // 子级字段名
							}"
							accordion
							highlight-current
							@node-click="handleNodeClick"
						></el-tree>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否显示" :label-width="formLabelWidth" prop="showflag">
				<el-switch
					v-model="form.showflag"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="true"
					:inactive-value="false"
				></el-switch>
			</el-form-item>
			<el-form-item label="属性" :label-width="formLabelWidth" prop="category">
				<fortress-select
					v-model="form.category"
					:dictList="ChannelCategory_cmsList"
					placeholder="请选择属性"
					clearable
				></fortress-select>
			</el-form-item>
			<!-- <el-form-item label="访问地址" :label-width="formLabelWidth" prop="url">
        <el-input
          v-model="form.url"
          autocomplete="off"
          placeholder="请输入访问地址"
        ></el-input>
      </el-form-item> -->

			<el-form-item label="图片" :label-width="formLabelWidth" prop="image">
				<fortress-upload type="image" name="image" :formData="form"></fortress-upload>
				<resource-select modelName="form.image" type="image" @choosed="resourceChoosed"></resource-select>
			</el-form-item>
			<template v-if="form.category == 2">
				<el-form-item label="封面模板" :label-width="formLabelWidth" prop="covertp">
					<fortress-select
						v-model="form.covertp"
						:dictList="covertpList"
						placeholder="请选择封面模板"
						clearable
					></fortress-select>
					<el-button style="margin-left:17px" type="text" @click="queryUrlList()">刷新</el-button>
				</el-form-item>
				<el-form-item label="内容" :label-width="formLabelWidth" prop="content">
					<fortress-editor v-model="form.content"></fortress-editor>
				</el-form-item>
			</template>
			<template v-if="form.category == 3">
				<el-form-item label="外链地址" :label-width="formLabelWidth" prop="weburl">
					<el-input v-model="form.weburl" autocomplete="off" placeholder="请输入外链地址"></el-input>
				</el-form-item>
			</template>
			<template v-if="form.category == 1">
				<el-form-item label="列表模板" :label-width="formLabelWidth" prop="listtp">
					<fortress-select v-model="form.listtp" :dictList="listtpList" placeholder="请选择列表模板" clearable></fortress-select>
					<el-button style="margin-left:17px" type="text" @click="queryUrlList()">刷新</el-button>
				</el-form-item>

				<el-form-item label="文章模板" :label-width="formLabelWidth" prop="articletp">
					<fortress-select
						v-model="form.articletp"
						:dictList="articletpList"
						placeholder="请选择文章模板"
						clearable
					></fortress-select>
					<el-button style="margin-left:17px" type="text" @click="queryUrlList()">刷新</el-button>
				</el-form-item>
				<el-form-item label="模型" :label-width="formLabelWidth" prop="model">
					<fortress-select v-model="form.model" :dictList="modelList" placeholder="请选择模型" clearable></fortress-select>
					<el-button style="margin-left:17px" type="text" @click="queryUrlList()">刷新</el-button>
				</el-form-item>
			</template>
			<el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
				<el-input-number v-model="form.sort"></el-input-number>
			</el-form-item>
			<el-form-item label="是否审核" :label-width="formLabelWidth" prop="auditflag">
				<el-switch
					v-model="form.auditflag"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="true"
					:inactive-value="false"
				></el-switch>
			</el-form-item>
			<el-form-item label="审核人" v-show="form.auditflag" :label-width="formLabelWidth" prop="auditUser">
				<el-input
					@click.native="auditerVisible = true"
					type="text"
					clearable
					:value="form.auditUser.map(item => item.realName) + ''"
					readonly
					suffix-icon="el-icon-user"
				/>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>

		<el-dialog :visible.sync="auditerVisible" append-to-body modal-append-to-body title="审核人" width="80%" @close="cancelAuditer">
			<v-auditer :visible="auditerVisible" ref="auditer" v-model="form.auditUser"></v-auditer>
			<template #footer>
				<el-button type="danger" @click="cancelAuditer">取消</el-button>
				<el-button type="success" @click="confirmAuditer">确定</el-button>
			</template>
		</el-dialog>
	</el-dialog>
</template>
<script>
import { cmschannelInfo, cmschannelSave, cmschannelEdit } from "@/api/cms/cmschannel.js"
import { enumList, urlList } from "@/api/public.api.js"
import { cmstemplateFilter } from "@/api/cms/cmstemplate.js"
import * as ftVal from "@/common/fortressValidator.js"
import ResourceSelect from "@/components/resource-select.vue"
import { ct } from "@/mixins/mixmethod.js"
import VAuditer from "./components/auditer.vue"

export default {
	mixins: [ct],
	props: ["allParents"],
	data() {
		return {
			visible: false,
			selParent: {
				id: "",
				label: "",
			},
			form: {
				title: "",
				info: "",
				keywords: "",
				name: "",
				code: "",
				parentId: "",
				url: "",
				showflag: true,
				category: "",
				image: "",
				content: "",
				weburl: "",
				listtp: "",
				covertp: "",
				articletp: "",
				model: "",
				sort: "",
				auditflag: false,
				Name: "",
				auditUser: [],
			},
			formLabelWidth: "120px",
			myconfig: window.$conf.commonConf.ueConfig,
			rules: {
				name: [{ required: true, message: "请输入名称", trigger: "blur" }],
				code: [
					{ required: true, message: "请输入标识", trigger: "blur" },
					{ validator: ftVal.validateAlpNum, trigger: "blur" },
				],
				showflag: [{ required: true, message: "请输入是否显示", trigger: "blur" }],
				category: [{ required: true, message: "请输入属性", trigger: "blur" }],
				listtp: [{ required: true, message: "请输入列表模板", trigger: "blur" }],
				covertp: [{ required: true, message: "请输入封面模板", trigger: "blur" }],
				articletp: [{ required: true, message: "请输入文章模板", trigger: "blur" }],
				model: [{ required: true, message: "请输入模型", trigger: "blur" }],
				auditflag: [{ required: true, message: "请输入是否审核", trigger: "blur" }],
				weburl: [
					{ required: true, message: "请输入外链地址", trigger: "blur" },
					// { validator: ftVal.validateURL, trigger: "blur" },
				],
			},
			ChannelCategory_cmsList: [],
			YesNoList: [],
			listtpList: [],
			covertpList: [],
			articletpList: [],
			modelList: [],
			auditerVisible: false, // 审核人弹窗
		}
	},
	created() {},
	components: {
		"resource-select": ResourceSelect,
		VAuditer,
	},
	methods: {
		queryEnumList() {
			this.ChannelCategory_cmsList = []
			enumList("ChannelCategory", "cms").then(resp => {
				if (resp.code == 0) {
					this.ChannelCategory_cmsList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		queryUrlList() {
			this.listtpList = []
			cmstemplateFilter("list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.listtpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.covertpList = []
			cmstemplateFilter("cover").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.covertpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.articletpList = []
			cmstemplateFilter("article").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.articletpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.modelList = []
			urlList("/cms/cmsModel/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.modelList.push({ code: item.id, name: item.title })
						})
					}
				}
			})
		},
		init(id) {
			this.resetForm()
			this.queryEnumList()
			this.queryUrlList()
			//修改
			if (id) {
				cmschannelInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
								auditUser: resp.data.auditUser || [],
							}
							if (this.form.parentId) {
								this.findParentCode(this.form.parentId, this.allParents)
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
			this.visible = true
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.auditflag) {
						if (!this.form.auditUser.length) {
							this.$msg({
								message: "请选择审核人",
								type: "error",
							})
							return
						}
					}
					//修改
					if (this.form.id) {
						if (this.form.id == this.form.parentId) {
							this.$msg({
								message: "不允许将本节点选为上级节点",
								type: "error",
							})
							return
						}
						cmschannelEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						cmschannelSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				title: "",
				info: "",
				keywords: "",
				name: "",
				code: "",
				parentId: "",
				url: "",
				showflag: true,
				category: "",
				image: "",
				content: "",
				weburl: "",
				listtp: "",
				covertp: "",
				articletp: "",
				model: "",
				sort: "",
				auditflag: false,
				Name: "",
				auditUser: [],
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
		//查找父节点
		findParentCode(parentId, dataScope) {
			dataScope.forEach(m => {
				if (parentId == m.id) {
					this.selParent.id = m.id
					this.selParent.label = m.name
					return
				} else if (m.children) {
					this.findParentCode(parentId, m.children)
				}
			})
		},
		//树形菜单展示
		handleNodeClick(data) {
			this.selParent.id = data.id
			this.selParent.label = data.name
			this.form.parentId = data.id
		},
		cancelAuditer() {
			this.auditerVisible = false
			this.$refs.auditer.onCancel()
		},
		confirmAuditer() {
			this.$refs.auditer.onSubmit()
			this.cancelAuditer()
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
</style>
